<template>
    <Back url="/notices" title="公告详情" />
    <div class="detail-wrapper">
        <div class="title">
            <h1>{{ detail.title }}</h1>
            <p>发表日期：{{ detail.createdAt }}</p>
        </div>
        <div class="detail" v-html="detail.content"></div>
    </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import Back from "@/components/back";
import { NoticeDetail } from "@/api/notices";
import { ElMessage } from "element-plus";

const route = useRoute();
const detail = ref({});

onMounted(async () => {
    const { id } = route.params;
    if (!id) {
        return ElMessage.error("id不能为空");
    }
    const res = await NoticeDetail(id);
    if (res) {
        detail.value = res;
    }
});
</script>

<style lang="scss" scoped>
.detail-wrapper {
    padding: 20px;
    .title {
        text-align: center;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
        h1 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        p {
            color: #707070;
        }
    }
    .detail {
        padding: 0px 120px;
        line-height: 1.6;
    }
}
</style>
